<template>
    <div class="app-container">
      <Levelbar></Levelbar>
      <div class="main" v-loading = "loading">
            <div class="form-title">服务开通</div>
            <div class="title">
                <el-row type="flex" class="row-bg" justify="center">
                    审核中
                </el-row>
            </div>
            <aside>服务信息</aside>
            <el-form ref="form" :model="form" label-width="130px" class="form-pading">
                <el-form-item label="学校：">
                    <span class="title-left">{{form.sSchoolName}}</span>
                </el-form-item>
                <el-form-item label="服务名称：">
                    <span class="title-left">{{form.sServiceName}}</span>
                </el-form-item>
                <el-form-item label="收费方式：">
                    <span class="title-left">
                        <span v-if="form.sPayTypeNew == 1">月收</span>
                        <span v-else>年收</span>
                    </span>
                </el-form-item>
                <el-form-item label="收费金额：">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            {{form.sMoney}}元 <span class="title-icon">收费范围为{{montyList.limitNum}}~{{montyList.upNum}}元</span>
                        </el-col>
                        
                    </el-row>
                </el-form-item>
                <div v-if="form.sPayTypeNew == '1'">
                  <el-form-item label="月份数：" v-for="(monthsVal,index) in form.sNewTimeNum" :key="index">
                    <el-row :gutter="20" >
                        <el-col :span="2">
                          <span>{{monthsVal.name}}</span>
                        </el-col>
                        <el-col :span="4">
                            <span class="monty">原价</span>：{{monthsVal.price}}元
                        </el-col>
                        <el-col :span="4">
                            <span class="monty">优惠价格</span>：{{monthsVal.discount}}.00元
                        </el-col>
                    </el-row>
                </el-form-item>
                </div>
                <div v-if="form.sPayTypeNew == '2'">
                  <el-form-item label="年份数：" v-for="(yearsVal,index) in form.sNewTimeNum" :key="index">
                    <el-row :gutter="20">
                        <el-col :span="2">
                            <span>{{yearsVal.name}}</span>
                        </el-col>
                        <el-col :span="4">
                            <span class="monty">原价：</span>{{yearsVal.price}}元
                        </el-col>
                        <el-col :span="4">
                            <span class="monty">优惠价格</span>：{{yearsVal.discount}}.00元
                        </el-col>
                    </el-row>
                </el-form-item>
                </div>
                <el-form-item label="是否与会员打包：">
                     <el-row :gutter="20">
                        <el-col :span="6">
                          <span>{{this.vipboolean == 1 ? '是' : '否'}}</span>
                        </el-col>
                    </el-row>
                </el-form-item>
                <!-- 判断是否会员打包 -->
                <!-- v-if="form.vip" -->
                <div v-if="this.vipboolean == 1">
                    <el-form-item label="月份数：" v-for="(monthsVal,index) in sNewPackTimeNum" :key="index">
                        <el-row :gutter="20" >
                            <el-col :span="2">
                            <span>{{monthsVal.name}}</span>
                            </el-col>
                            <el-col :span="4">
                                <span class="monty">原价</span>：{{monthsVal.originalPrice}}元
                            </el-col>
                            <el-col :span="4">
                                <span class="monty">参与打包价格</span>：{{Number(monthsVal.price).toFixed(2)}}元
                            </el-col>
                        </el-row>
                    </el-form-item>
                </div>
                <el-form-item label="收费开始时间：">
                    <el-row :gutter="20">
                        <el-col :span="6">
                          <span>{{form.sPayStartTime}}</span>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <aside>已选设置</aside>
            <el-form label-width="110px" class = "form-pading">
                <el-form-item label="当前学校：">
                    <span class="title-left">{{ form.sSchoolName }}</span>
                </el-form-item>
                <el-form-item label="服务名称：">
                    <span class="title-left">{{ form.sServiceName }}</span>
                </el-form-item>
                <el-form-item label="收费方式：">
                    <span class="title-left">{{ form.sPayTypeNew == '1' ? '月收' : form.sPayTypeNew == '2' ? '年收' : '' }}</span>
                </el-form-item>
                <el-form-item label="收费金额：">
                    <span class="title-left"> {{ form.sMoney }}元</span>
                </el-form-item>
                <el-form-item label="收费开始时间：">
                    <div class="title-left">
                        <span >{{ form.sPayStartTime }}开始</span>
                    </div>
                </el-form-item>
            </el-form>
            <footer>
                <el-row type="flex" class="row-bg" justify="center">
                    <el-col :span="2">
                        <el-button @click="go">返回</el-button>
                    </el-col>
                </el-row>
            </footer>
      </div>
  </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import {
  getPayRecordInfoById,
  getScopeAmount,
  getProductIsPack,
  getchargeSetting
} from 'api/serviceManage';
export default {
    name: 'getService',
    components: { Levelbar },
    created() {
        this.exhibition();
    },
    data() {
        return {
      // 收费金额范围
            montyList: {},
            disabled: false,
      // 当前页面数据集合
            form: {

            },
            loading: false,
            vipboolean: '',
            sNewPackTimeNum: [],
            vipArr: []
        };
    },
    methods: {
        exhibition() {
            this.loading = true;
            // 查询一下会员
            getchargeSetting(this.$route.params.fServiceId).then(data => {
                    // console.log(data.data.content.chargeDetail)
                this.vipArr = JSON.parse(data.data.content.chargeDetail)
            }).then(() => {
                getPayRecordInfoById(this.$route.params.id).then(data => {
                    this.form = data.data.content;
                    this.vipboolean = data.data.content.sIsPack;
                    this.form.sNewTimeNum = JSON.parse(data.data.content.sNewTimeNum);

                    this.vipboolean = data.data.content.sIsPack;
                    // 与会员月份做一下对比
                    if (data.data.content.sNewPackTimeNum) {
                        JSON.parse(data.data.content.sNewPackTimeNum).forEach(item => {
                            this.vipArr.map(val => {
                                if (item.name == val.name) {
                                    this.sNewPackTimeNum.push(item)
                                }
                            })
                        })
                    } else {
                        console.log('2222')
                        this.vipArr.forEach(item => {
                            item.originalPrice = item.value * this.form.sMoney;
                            this.sNewPackTimeNum.push(item)
                        })
                    }
                    // this.sNewPackTimeNum = JSON.parse(data.data.content.sNewPackTimeNum);
                })
            }).then(() => {
                getScopeAmount().then(data => {
                    this.montyList = data.data.content;
                });
            }).then(() => {
                // this.$route.params.fServiceId
                getProductIsPack(this.$route.params.fServiceId).then(data => {
                    this.loading = false;
                    if (this.vipboolean !== data.data.content) {
                        return this.vipboolean
                    }
                    // this.vipboolean = data.data.content;
                })
            }).catch(Error => {
                this.loading = false;
                this.$message.error(Error);
            })
        },
    // 返回上一层
        go() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="scss" scoped>
.monty{
    color: #666
}
.title-left {
  margin-left: 10px;
}
.monty-icon {
  padding-left: 0 !important;
}
.el-icon-plus {
  color: #ff5e2c;
}
.title-icon {
    margin-left: 10px;
  color: #999;
}
.title-center {
  text-align: center;
}
.title {
  padding-top: 30px;
  font-size: 20px;
}
footer {
  padding: 20px 0 40px;
}
i {
  cursor: pointer;
}
.main {
  padding: 0 50px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  .form-title {
    padding-top: 8px;
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 72px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    border-bottom: 1px solid #ddd;
  }
}
aside {
  position: relative;
  padding: 36px 0 0 20px;
  font-size: 14px;
  color: #333;
  margin-bottom: 40px;
  &::before {
    height: 14px;
    width: 4px;
    background: #ff5e2c;
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
  }
}
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 2px;
  border: 1px solid rgb(217, 200, 191);
  box-sizing: border-box;
  color: rgb(61, 41, 31);
  display: inline-block;
  font-size: inherit;
  height: 36px;
  line-height: 1;
  outline: none;
  padding: 3px 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;

  &:focus {
    outline: none;
    border-color: #ff5e2c;
  }
}
</style>
